class Paging {
  constructor() {
    this.n = 1;
    this.perpage = 5;
    this.total = 0;
    this.bindEvent();
    this.renderPage()
  }
  //绑定时间
  bindEvent() {
    const _this = this;
    $("#paging").on("click", "a", function() {
      if ($(this).hasClass("prev")) {
        // 上一页
        //调用上一页的函数
        _this.handlePrevClick();
      } else if ($(this).hasClass("next")) {
        //下一页
        //调用下一页的函数
        _this.handleNextClick();
      } else if ($(this).hasClass("btn-num")) {
        // 获取点击的页码
        let page = Number($(this).text());
        // 调用页码处理函数
        _this.handleNumClick(page);
      }
    });
  }
  //点击上一页的处理函数
  handlePrevClick() {
    this.n--;
    //如果n为0；变为1（最小为1  没有0页）
    if (this.n <= 0) {
      this.n = 1;
    } else {
      //不是0 就渲染
      this.renderPage();
    }
  }
  //下一页处理函数
  handleNextClick() {
    this.n++;
    if (this.n > this.total) {
      this.n = this.total;
    } else {
      this.renderPage();
    }
  }
  //数字处理函数
  handleNumClick(n) {
    this.n = n;
    this.renderPage();
  }
  //请求来获取相应数据 并进行渲染
  renderPage() {
    $.get("/api/pos/page", { n: this.n, perpage: this.perpage }, resp => {
      if (resp.code === 200) {
        const { positions, n, total } = resp.body;
        this.n = n; //获取激活的页码  如果删除后少一页  那么this.n就不在是之前的 就应该是获取到的n
        this.total = total;
        let trs = "";
        //将数据渲染到页面组装trs
        positions.forEach((pos, index) => {
          trs += `<tr class="gradeX" data-id="${pos._id}">
                    <td>${index + 1 + (this.n - 1) * this.perpage}</td>
                    <td>
                      <span>${pos.title}</span>
                      <input type="text" class="title">
                    </td>
                    <td>
                      <span>${pos.company}</span>
                      <input type="text" class="company">
                    </td>
                    <td class="img"><img class="logo" src="${
                      pos.logo
                    }" alt=""></td>
                    <td class="center">
                      <span>${pos.salary}</span>
                      <input type="text" class="salary">
                    </td>
                    <td class="center">
                      <button class="btn btn-primary btn-xs btn-edit">编辑</button>
                      <button class="btn btn-danger btn-xs btn-del">删除</button>
                      <button class="btn btn-success btn-xs btn-ok">确定</button>
                      <button class="btn btn-warning btn-xs btn-cancel">取消</button>
                    </td>
                  </tr>`;
        });
        $("#position-tbody").html(trs);
        //页码渲染
        let pages = "";
        pages += `<li class="paginate_button ${this.n===1 ? 'disabled': ''}" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_previous"><a class="prev" href="javascript:;">上一页</a></li>`
        for (let i = 1; i <= this.total; i++) {
          pages += `<li class="paginate_button ${
            i === this.n ? "active" : ""
          }" aria-controls="DataTables_Table_0" tabindex="0"><a class="btn-num" href="javascript:;">${i}</a></li>`;
        }
        pages += `<li class="paginate_button ${this.n===this.total ? 'disabled' : ''}" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_next"><a class="next" href="javascript:;">下一页</a></li>`
        $('#paging').html(pages)
      }
    });
  }
}
// new Paging()